<template>
  <div class="dialog" @touchmove.stop.prevent>
    <div
      class="overlay"
      @click="clickOverlay"
      :style="[showOverlay, { transition: duration + 's' }]"
    ></div>
    <div
      class="panel"
      :style="[
        panelStyle,
        showPopup,
        {
          transform,
          transition: duration + 's',
        },
      ]"
    >
      <div class="title" v-if="title">{{ title }}</div>
      <div class="content">{{ content }}</div>
      <div class="button-wrap">
        <div class="btn btn-cancel" @click="clickCancel" v-if="!hideLeftBtn">
          {{ btnLeftText }}
        </div>
        <div class="line" v-if="(hideLeftBtn || hideRightBtn) ? false : true"></div>
        <div class="btn btn-confirm" @click="clickConfirm" v-if="!hideRightBtn">
          {{ btnRightText }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Dialog",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
    content: {
      type: String,
      default: "",
    },
    btnLeftText: {
      type: String,
      default: "取消",
    },
    btnRightText: {
      type: String,
      default: "确认",
    },
    hideLeftBtn: {
      type: Boolean,
      default: true,
    },
    hideRightBtn: {
      type: Boolean,
      default: false,
    },
    // 面板样式
    styles: Object,
    // 动画时长，单位秒
    duration: {
      type: Number,
      default: 0.3,
    },
    // 是否在点击遮罩层后关闭
    clickOverlayClose: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    panelStyle() {
      return Object.assign(
        {
          width: "90%",
          height: "160px",
          background: "#fff",
        },
        this.styles
      );
    },
  },
  watch: {
    value(show) {
      this.transform = `scale(0)`;

      if (show) {
        this.openPopup();
      } else {
        this.closePopup();
      }
    },
  },
  data() {
    return {
      showOverlay: {
        display: "none",
        opacity: 0,
      },
      showPopup: {
        opacity: 0,
        display: "none",
      },
      transform: "",
    };
  },
  methods: {
    // 打开弹窗
    openPopup() {
      this.showPopup = { opacity: 0 };
      this.showOverlay = { opacity: 0 };

      setTimeout(() => {
        this.transform = `scale(1)`;
        this.$set(this.showOverlay, "opacity", 1);
        this.opened();
      }, 5);

      setTimeout(() => {
        this.showPopup = { opacity: 1, display: "block" };
      }, 100);
    },
    // 关闭弹窗
    closePopup() {
      this.$set(this.showOverlay, "opacity", 0);
      this.showPopup = { opacity: 0 };

      setTimeout(() => {
        this.$set(this.showPopup, "display", "none");
        this.$set(this.showOverlay, "display", "none");
      }, this.duration * 800);
    },
    // 打开弹出层且动画结束后触发
    opened() {
      setTimeout(() => {
        this.$emit("opened");
      }, this.duration * 1000);
    },
    // 点击遮罩层时触发
    clickOverlay() {
      if (this.clickOverlayClose) {
        this.$emit("clickOverlay");
        this.$emit("input", false);
        this.close();
      }
    },
    clickCancel() {
      this.$emit("clickCancel");
      this.$emit("input", false);
      this.close();
    },
    clickConfirm() {
      this.$emit("clickConfirm");
      this.$emit("input", false);
      this.close();
    },
    // 关闭弹出层时触发
    close() {
      this.$emit("close");
      this.closed();
    },
    // 关闭弹出层且动画结束后触发
    closed() {
      setTimeout(() => {
        this.$emit("closed");
      }, this.duration * 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
$radius: 10px;

.dialog {
  .overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9000;
    background-color: rgba($color: #000000, $alpha: 0.5);
  }

  .panel {
    position: fixed;
    z-index: 9001;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: $radius;
    transition-timing-function: cubic-bezier(1, 0, 0, 1);
    padding-top: 30px;
    box-sizing: border-box;

    .title {
      color: #333;
      font-size: 16px;
      text-align: center;
      line-height: 1;
      padding-bottom: 12px;
    }

    .content {
      color: #646566;
      font-size: 13px;
      text-align: center;
      padding: 0 30px;
      box-sizing: border-box;
    }

    .button-wrap {
      width: 100%;
      height: 46px;
      line-height: 46px;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      text-align: center;
      border-top: 1px solid #ebedf0;
      display: flex;
      justify-content: space-between;

      .line {
        width: 1px;
        height: 100%;
        background: #ebedf0;
      }

      .btn {
        flex: 1;
        font-size: 15px;

        &.btn-cancel {
          color: #323233;
        }

        &.btn-confirm {
          color: #ee0a24;
        }
      }
    }
  }
}
</style>